<!--
 * @Author: 230800029 rixing.liu@hytera.com
 * @Date: 2024-04-19 11:52:23
 * @LastEditors: 230800029 rixing.liu@hytera.com
 * @LastEditTime: 2024-04-19 14:28:50
 * @FilePath: /vue3-pg/src/components/menu/index.vue
 * @Description: 
 * Copyright (c) 2024 by rixing.liu, All Rights Reserved.
-->
<template>
  <div class="menu">
    <div
      v-for="item in menuTree"
      :key="item.name"
      class="item"
      @click="go(item.name)"
      :class="{ active: item.name === activeRouteName }"
    >
      {{ item.meta.title }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
import useMenuTree from "./use-sub-tree";
import { computed } from "vue";

const { menuTree } = useMenuTree();

const router = useRouter();

const go = (name: string) => {
  router.push({ name });
};

const activeRouteName = computed(() => router.currentRoute.value.name);
</script>

<style lang="less" scoped>
.menu {
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  .item {
    cursor: pointer;
    padding: 20px;
    border: 1px solid #000;
  }
  .active, .item:hover {
    color: blue;
    border-color: blue;
  }
}
</style>
